<style>
    #con_m_list li {width:230px; overflow: hidden; float: left; margin-bottom: 10px; font-size: 12px; line-height: 20px;}
    .current-set {color: red; font-weight: 700;}
    .address_del_icon {margin-left:1px;cursor:pointer}
    .address_del_span {margin-left:2px;}
    .selected_address_div {float:left}
</style>
<b>已选择地区：</b><br />
<div id="sel_regions_div">
    <{foreach from=$sel_regions_list item=item}>
        <div class='selected_address_div' value='<{$item.region_id}>'>
            <{if $item.comma}>
                <lable>,</lable>
            <{/if}>
            <span class='address_del_span'><{$item.local_name}>
                <{img class='address_del_icon' src="bundle/delete.gif" app="desktop" onclick="delSelfRegion(this);"}>
            </span>
       </div>
    <{/foreach}>
</div>
<div id='sel_regions_empty' <{if $selected_str}>style="display:none"<{/if}>>请选择具体地区</div>
<input type="hidden" value='<{$selected_str}>' name="address" id='selected_str_input' />
<hr style="clear:both"/>
<b>地区列表筛选：</b><{input type='region' app='eccommon' name="area" value="{$omeauto_regions_value}" required="true" effect="omeauto_regions_list"}>
<br /><br /><b>地区列表：</b>（通过下拉框筛选地区列表，并点击所需地区加入到已选择地区处）<br />
<div id="omeauto_regions_list"></div>

<script>

    //点击事件选中动作
    function doSelfRegion(obj) {
        var cur_text = obj.getText();
        var cur_region_id = obj.getAttribute('value');
        var selected_str = get_selected_value_str();
        var comma_flag = false;
        if (selected_str) {
            var arr_selected_str = selected_str.split(',');
            for (var i = 0; i < arr_selected_str.length; i++) {
                //判断是否已经选中
                if (parseInt(arr_selected_str[i]) == parseInt(cur_region_id)) {
                    alert(cur_text + "已经被选中");
                    return false;
                }
            }
            comma_flag = true;
        }
        //获取已选择地区 添加显示
        var html = get_selected_names_list(cur_region_id,cur_text,comma_flag);
        $E('#sel_regions_div').adopt(
                new Element('div').set('html', html).getFirst());
        //获取已选择地区 value
        var add_value_str = cur_region_id;
        if (comma_flag) {
            add_value_str = ',' + add_value_str;
        }
        //加入到input hidde 的value中去
        selected_str += add_value_str;
        $("selected_str_input").set('value', selected_str);
        //隐藏空白提示div
        $("sel_regions_empty").hide();
    }
    
    //获取单个地区“已选择地区”的html
    function get_selected_names_list(region_id, local_name, comma_flag) {
        var delete_img_src = "<{$delete_img_src}>";
        var html = '<div value=\''+region_id+'\' class=\'selected_address_div\'>';
        if(comma_flag){
            html += '<lable>,</lable>';
        }
        html += '<span class=\'address_del_span\'>' + local_name
                + '</span><img class=\'address_del_icon\' src=\''
                + delete_img_src
                + '\' app=\'desktop\' onclick=\'delSelfRegion(this);\'>';
        html += '</div>';
        return html;
    }

    //删除当前区域
    function delSelfRegion(obj) {
        var cur_region_id = obj.getParent('.selected_address_div').getAttribute('value');
        //获取拼接“已选择地区”
        var selected_area_html = '';
        var count = 1;
        $$('.selected_address_div').each(function(item) {
            var region_id = item.getAttribute('value');
            var local_name = item.getChildren('.address_del_span').getText();
            var comma_flag = false;
            if(parseInt(region_id) != cur_region_id){
                if(count > 1){
                    comma_flag = true;                  
                }
                var html = get_selected_names_list(region_id,local_name,comma_flag);
                selected_area_html += html;
                count++;
            }
        });
        $('sel_regions_div').set('html', selected_area_html);
        if(!selected_area_html){
            //显示空白提示div
            $("sel_regions_empty").show();
        }
        //获取拼接input hidden的value的字符串
        var selected_str = get_selected_value_str();
        var arr_selected_str = selected_str.split(',');
        var arr_keep = [];
        for (var i = 0; i < arr_selected_str.length; i++) {
            //保留非删除的region_id
            if (parseInt(arr_selected_str[i]) != parseInt(cur_region_id)) {
                arr_keep.push(arr_selected_str[i]);
            }
        }
        $("selected_str_input").set('value', arr_keep.join(','));
    }

    function get_selected_value_str() {
        //获取已被选中地区
        return $("selected_str_input").getValue();
    }

    window.addEvent('domready', function() {
        //目前无论是新增还是编辑 无需绑定显示区域筛选下拉框
        load_omeauto_regions_list("", "", "onload", "<{$selected_str}>");
    });

    //加载收获地址的区域列表
    function load_omeauto_regions_list(region_id, value, action, selected_str) {
        if (action == "onchange" && region_id == '_NULL_') {
            //在选择下拉框过程中选择为空也就是'请选择...'项,这里自动显示父类下拉框的子地区
            var region_id = "";
            if (value) {
                var arr_cur_select = value.split(":");
                region_id = arr_cur_select[2];
            }
        }
        new Request(
                {
                    url : "index.php?app=omeauto&ctl=order_type&act=omeauto_regions_list",
                    async : false,
                    method : 'post',
                    data : {
                        p_region_id : region_id,
                        selected_region_ids_str : selected_str
                    },
                    onComplete : function(region_html) {
                        $("omeauto_regions_list").set('html', region_html);
                    }
                }).send();
    }

</script>